<script setup>
  import {ref, watch} from 'vue'

  // 普通数据演示监听和立即执行
  const count = ref(0)

  setTimeout(() => {
    count.value ++
  }, 2000);

  // 第一个参数是监听的数据
  // 第二个是回调函数
  // 第三个参数是一个对象,里面可以增加其他配置如深度监听和默认立即执行
  // watch(count, (newVal, oldVal) => {
  //   console.log('count 发生了变化', newVal, oldVal);
  // }, {
  //   // 页面进入立即执行
  //   immediate: true
  // })

  // ------------
  // 学生对象演示深度监听
  const student = ref({
    name: 'tom',
    age: 17
  })

  setTimeout(() => {
    console.log('setTimeout 已经执行');
    // 深度监听时才监听得到
    student.value.age ++
  }, 1000);

  // watch(student, () => {
  //   console.log('学生发生了变化', student.value.name, student.value.age);
  // }, {
  //   // 深度监听
  //   deep: true
  // })

  // 尝试同时监听两个数据, 任何一个发生变化都得触发监听器
  watch([count, student], (newVal, oldVal) => {
    console.log('复合监听器, count / student 任何一个发生变化都会触发');
    console.log('新', newVal);
    console.log('旧', oldVal);
  }, {
    deep: true
  })

  // 在不动用深度监听的情况下, 只监听对象其中一个属性
  watch( ()=>student.value.age, () => {
    console.log('单独监听 age 发生了变化, 但是没有用深度监听');
  } )
</script>

<template>
  <div>
    {{ count }}
  </div>
</template>